<template>
    <div style="min-height: 505px;">
        <div class="d-flex justify-content-center">
            <div style="width: 70%; margin-bottom: 30px;" class="d-flex justify-content-end">
                <el-button type="primary">新建项目</el-button>
                <el-button type="primary">项目详情</el-button>
                <el-button :icon="'View'" type="primary" @click="viewFile">远程查档阅卷</el-button>
                <el-button type="primary">账户管理</el-button>
                <el-button type="primary">流程管理</el-button>
                <el-button type="primary">股权监控</el-button>
                <el-button type="primary">债转股</el-button>
                <el-button type="primary">线上会议</el-button>
            </div>
            
        </div>
        <div style="min-height:540px;margin-bottom: 30px;">
            <CardTitle 
                :titles="cardTitleParam.titles" 
                :cardBgColor="cardTitleParam.cardBgColor"
                :fontColor="cardTitleParam.fontColor" 
            />
            <CardList :cardList="cardListParam.cardList" 
                :listField="cardListParam.listField"
                :isSelected="true"
                ref="selectedItem"
            />
        </div>
    </div>

    <el-dialog v-model="consultFilelVisible"> <!-- width="70%" -->
        <!-- 文件预览 -->
        <div class="fileView">
                <FilePreview fileUrl="/ecsFile/ab1419ca-e665-40fc-95ac-2ddd7a639ef8.docx"/>
            </div>      
    </el-dialog>
</template>

<script setup lang="ts">
    import { reactive, ref} from 'vue'
    import CardTitle from '@/components/CardTitle.vue';
    import CardList from '@/components/CardList.vue';
    import { ElMessage} from 'element-plus'
    import FilePreview from '@/components/FilePreview.vue'

    const selectedItem = ref()

    const cardTitleParam = reactive({
        cardBgColor: "rgb(68, 114, 196)",
        fontColor:"#fff",
        titles: [
            { 'title': '项目编号'},
            { 'title': '项目名称' },
            { 'title': '债权人'},
            { 'title': '管理人'},
            { 'title': '法官'},
            { 'title': '开始时间'},
            { 'title': '进度'},
        ]
    });
    
    const cardListParam = reactive({
        cardList: [
        {'projectCode':'YTQHBI231205013','name':'汕头国瑞非金债权','handle':'李小明','createTime':'费阳','imgs':'周鸿武','videos':'2023-12-05 11:30','dataDownload':'90%'},
        {'projectCode':'YTQHBI231205012','name':'鸿禧集团有限公司债权','handle':'陈强','createTime':'冯思文','imgs':'李鹏','videos':'2023-12-05 11:25','dataDownload':'85%'},
        {'projectCode':'YTQHBI231205011','name':'东恒珠宝首饰司债权','handle':'陈四','createTime':'付彩群','imgs':'蔡立强','videos':'2023-12-05 10:25','dataDownload':'82%'},
        {'projectCode':'YTQHBI231205010','name':'天津钢管集团债权','handle':'李明','createTime':'高全明','imgs':'陆纪明','videos':'2023-12-05 10:20','dataDownload':'68%'},
        {'projectCode':'YTQHBI231205009','name':'湖南园康富力债权','handle':'周建','createTime':'郭庆明','imgs':'张细军','videos':'2023-12-05 09:25','dataDownload':'82%'},
        {'projectCode':'YTQHBI231205008','name':'易尚展示股份有限公司债权','handle':'蔡立','createTime':'韩涛','imgs':'董鸿泰','videos':'2023-12-04 16:25','dataDownload':'75%'},
        {'projectCode':'YTQHBI231205007','name':'贤丰控股集团有限公司债权','handle':'鲁立国','createTime':'贺丽芳','imgs':'肖克龙','videos':'2023-12-04 15:20','dataDownload':'76%'},
        {'projectCode':'YTQHBI231205006','name':'大凡珠宝首饰有限公司债权','handle':'曹爽','createTime':'黄鸿雁','imgs':'段建国','videos':'2023-12-04 14:25','dataDownload':'78%'},
        {'projectCode':'YTQHBI231205005','name':'佳田制衣有限公司债权','handle':'陆林','createTime':'胡国昌','imgs':'鲁雪','videos':'2023-12-04 11:32','dataDownload':'81%'},
        {'projectCode':'YTQHBI231205004','name':'志高空调有限公司债权','handle':'邓维军','createTime':'蒋肖雁','imgs':'崔兰','videos':'2023-12-04 10:56','dataDownload':'83%'},
        {'projectCode':'YTQHBI231205003','name':'榕泰实业股份有限公司债权','handle':'董艺琳','createTime':'柯晓婷','imgs':'戴韦培','videos':'2023-12-04 09:31','dataDownload':'85%'},
        {'projectCode':'YTQHBI231205002','name':'联创煤炭有限公司债权','handle':'段凯','createTime':'曾发军','imgs':'范少军','videos':'2023-12-04 09:11','dataDownload':'88%'},
        {'projectCode':'YTQHBI231205001','name':'显微电子有限公司债权','handle':'付志明','createTime':'梁康','imgs':'樊强','videos':'2023-12-03 09:27','dataDownload':'90%'},
        ],
        listField: ['projectCode','name', 'handle','createTime','imgs','videos','dataDownload'],
    })
    const collateralVisible = ref(false);

    const viewMapAction = ()=>{
        // console.log('selectedItem.currentItem')
        // console.log(checkItem.value.checkItem.vlaue)
        // console.log(checkItem.value.checkItem.vlaue.projectCode)

        if(!selectedItem.value.selectedItem.vlaue){
            //console.log('请选中一行数据')
            ElMessage({
                message:'请选中一行数据.',
                type: "info",
            });
            return;
        }
        console.log(selectedItem.value.selectedItem.vlaue.projectCode)

        collateralVisible.value = true;
    }

    const consultFilelVisible = ref(false);

    const viewFile = ()=>{

        if(!selectedItem.value.selectedItem.vlaue){
            //console.log('请选中一行数据')
            ElMessage({
                message:'请选中一行数据.',
                type: "info",
            });
            return;
        }
        console.log(selectedItem.value.selectedItem.vlaue.projectCode)
       
        consultFilelVisible.value = true;
    }
    
</script>

<style scoped>
    .fileView {
        height: 680px;
        overflow: scroll;
    }
    .el-button{
        background-color: rgb(68, 114, 196);
    }
</style>